<template>
  <div>
    <Form :model="resourceForm" ref="resourceForm" :rules="rules" :label-width="120">
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.code')" prop="resourceCode">
            <Input
              :placeholder="$t('module.tenantManage.inputCode')"
              v-model="resourceForm.resourceCode"
              :maxlength="50"
            />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.name')" prop="resourceName">
            <Input
              :placeholder="$t('module.tenantManage.inputName')"
              v-model="resourceForm.resourceName"
              :maxlength="50"
            />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.requestUrl')" prop="resourceUrl">
            <Input
              :placeholder="$t('module.tenantManage.inputRequestUrl')"
              v-model="resourceForm.resourceUrl"
              :maxlength="255"
            />
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.orderByCode')" prop="sort">         
            <InputNumber v-model="resourceForm.sort" :min='0' style="width:100%;"></InputNumber>
          </Form-item>
        </Col>
      </Row>
      <Row class="code-row-bg">
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.tenantManage.remark')" prop="remark">
            <Input
              :placeholder="$t('module.tenantManage.remark')"
              v-model="resourceForm.remark"
              :maxlength="255"
              type="textarea" :autosize="{minRows: 2,maxRows: 5}" 
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { insertResource, updateResource } from '@api/flowable/tenantManage.js'
export default {
  name: 'resourceEdit',
  props: {
    resourceInfo: {}
  },
  data() {
    return {
      resourceForm: {
        resourceCode: this.resourceInfo.resourceCode || '',
        resourceName: this.resourceInfo.resourceName || '',
        resourceUrl: this.resourceInfo.resourceUrl || '',
        sort: this.resourceInfo.sort || 0,
        remark: this.resourceInfo.remark || ''
      },
      rules: {
        resourceCode: [{ required: true, trigger: 'blur', message: this.$t('module.tenantManage.inputCode') }],
        resourceName: [{ required: true, trigger: 'blur', message: this.$t('module.tenantManage.inputName') }],
        resourceUrl: [{ required: true, trigger: 'blur', message: this.$t('module.tenantManage.inputRequestUrl') }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created() {
    let titleText
    this.resourceInfo.id ? (titleText = this.$t('common.edit')) : (titleText = this.$t('common.create'))
    this.$emit('SetTitle', titleText + this.$t('module.tenantManage.resource'))
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    _processServiceResponse(res, text) {
      this.actions[0].loading = false
      if (res) {
        this.$Message.success({
          content: text,
          duration: 3
        })
        this.$emit('Close', this.resourceForm)
      }
    },
    save() {
      this.$refs['resourceForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          const id = this.resourceInfo.id
          if (id) {
            this.resourceForm.id = id
            updateResource(this.resourceForm)
              .then(res => {
                this._processServiceResponse(res, this.$t('common.updateSuccess'))
              })
              .catch(() => (this.actions[0].loading = false))
          } else {
            insertResource(this.resourceForm)
              .then(res => {
                this._processServiceResponse(res, this.$t('common.createSuccess'))
              })
              .catch(() => (this.actions[0].loading = false))
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
